import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col, Space,
    Form, Checkbox, Switch, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Typography
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
    MailOutlined,
    PhoneOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
const { Text } = Typography;
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};
const columns = [
    {
        title: '客户编号',
        dataIndex: 'CustNum',
        key: 'CustNum',
    },
    {
        title: '客户名称',
        dataIndex: 'Name',
        key: 'Name',
    },
    {
        title: '无效',
        dataIndex: 'Inactive',
        key: 'Inactive',
    },
];
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values)
    }
    render() {
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Space>
                        <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                        <Button type="primary" htmlType="submit">保存</Button>
                    </Space>
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="明细" key="1">
                                        <Form.Item label="客户代号" style={{ marginBottom: 0 }}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['Customer', 'CustNum']}
                                                    rules={[{ required: true, message: "客户代号必填" }]}>
                                                    <Input style={{ width: 200 }} />
                                                </Form.Item>
                                                <Form.Item>
                                                    <Button type="primary">选择客户</Button>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item
                                            label="客户名称"
                                            name={['Customer', 'Name']}
                                            rules={[{ required: true, message: "客户名称必填" }]}>
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['Customer', 'Saler']} label="销售员">
                                            <Select
                                                style={{ width: 200 }}
                                                showSearch
                                                placeholder="请选择销售员"
                                                filterOption={(input, option) =>
                                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item name={['Customer', 'Saler']} label="币种">
                                            <Select
                                                style={{ width: 200 }}
                                                placeholder="请选择币种"
                                            >
                                            </Select>
                                        </Form.Item>
                                        <Form.Item wrapperCol={{ offset: 5 }}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['Customer', 'Inactive']}
                                                    valuePropName="checked">
                                                    <Checkbox>无效</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['Customer', 'IsNetwork']}
                                                    valuePropName="checked">
                                                    <Checkbox>网商</Checkbox>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="联系人" key="2">
                                        <Form.Item
                                            name={['Customer', 'fullName']}
                                            label="联系人"
                                            rules={[{ required: true, message: "请输入联系人" }]}>
                                            <Input style={{ width: 200 }} />
                                        </Form.Item>
                                        <Form.Item name={['Customer', 'telphone']} label="联系电话">
                                            <Input prefix={<PhoneOutlined />} style={{ width: 240 }} />
                                        </Form.Item>
                                        <Form.Item name={['Customer', 'emailAddress']}
                                            rules={[{ required: true, message: "请输入电子邮件" }]}
                                            label="电子邮件">
                                            <Input prefix={<MailOutlined />} style={{ width: 240 }} />
                                        </Form.Item>
                                        <Form.Item
                                            name={['Customer', 'address']}
                                            label="联系地址">
                                            <Input.TextArea />
                                        </Form.Item>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                        <Col span={12}><Card>
                            <Table size="small" columns={columns} dataSource={this.state.dataSource} />
                        </Card></Col>
                    </Row>
                </Form>

            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;